<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-11 20:43:00
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-27 10:33:08
 * @FilePath: /vue-admin/src/views/paying/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="paying">
    <!-- paying -->
    <el-card shadow="never">
      <el-form :inline="true">
        <el-form-item label="账户类型:">
          <el-select v-model="formPay.accountType" size="mini" placeholder="请选择账户类型">
            <el-option label="全部" :value="null" />
            <el-option v-for="(item, index) in AccountType" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="挑战项目:">
          <el-select v-model="formPay.challengeProject" size="mini" placeholder="所属阶段:">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in challenges" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="chaBTn">查询</el-button>
          <el-button type="primary" size="mini" @click="AccountDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="accountType" align="center" label="账户类型">
          <template v-slot="{ row }">
            <span v-if="row.accountType === 0">外汇</span>
            <span v-if="row.accountType === 1">美股</span>
            <span v-if="row.accountType === 2">期货</span>
          </template>
        </el-table-column>
        <el-table-column prop="challengeProject" align="center" label="挑战项目">
          <template v-slot="{ row }">
            <span v-if="row.challengeProject === 0">评估</span>
            <span v-if="row.challengeProject === 1">即时</span>
            <span v-if="row.challengeProject === 2">固定</span>
            <span v-if="row.challengeProject === 3">比赛</span>
            <span v-if="row.challengeProject === 4">股票</span>
            <span v-if="row.challengeProject === 5">免费评估</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountMoney" align="center" label="账户规模" />
        <el-table-column prop="accountCharges" align="center" label="账户费用" />
        <!-- <el-table-column prop="cryptocurrencyName" align="center" label="stripe名称" />
        <el-table-column prop="paymentConnection" align="center" label="stripe地址" /> -->
        <!--        <el-table-column-->
        <!--          prop="inputter"-->
        <!--          align="center"-->
        <!--          label="录入人"-->
        <!--        />-->
        <el-table-column align="center" label="操作" width="120">
          <template v-slot="{ row }">
            <el-button type="text" @click="editBtn(row)">编辑</el-button>
            <el-button type="text" @click="deleteAccount(row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-row>
        <paging :page-size="formPay.pageSize" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <addPaying :dialog-visible.sync="dialogVisible" :arrt="userInfo" :formPay="formPay" :tableDataAll="tableData"
        @updateData="handleUpdateData" />

      <el-dialog title="新增收费账号" :visible.sync="dialogAccount" width="30%">
        <el-form :model="AccountForm" ref="AccountForm" :rules="rules">
          <el-form-item prop="accountType" label="账户类型" label-width="100px">
            <el-select v-model="AccountForm.accountType" placeholder="请选择账号类型" size="mini">
              <el-option v-for="item in AccountType" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="challengeProject" label="挑战项目" label-width="100px">
            <el-select v-model="AccountForm.challengeProject" placeholder="请选择挑战项目" size="mini">
              <el-option v-for="item in challenges" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="accountMoney" label="账户规模" label-width="100px">
            <el-input v-model="AccountForm.accountMoney" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item prop="accountCharges" label="账户费用" label-width="100px">
            <el-input v-model="AccountForm.accountCharges" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="cryptocurrencyName" label="stripe支付名称" label-width="100px">
            <el-input v-model="AccountForm.cryptocurrencyName" autocomplete="off" size="mini"></el-input>
          </el-form-item>
          <el-form-item prop="paymentConnection" label="stripe支付链接" label-width="100px">
            <el-input v-model="AccountForm.paymentConnection" autocomplete="off" size="mini"></el-input>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAccount = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="BtnAccount" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { addAccountCharges, deleteAccount, getPayingList } from '@/api/paying'
import { getAccountType } from '@/api/Tradingacct'
import addPaying from './components/addPaying'
import paging from '@/components/paging.vue'
import { AccountType, challenges } from "@/utils";

export default {
  name: 'VueAdminIndex',
  components: {
    paging,
    addPaying
  },
  data() {
    return {
      dialogAccount: false, // 收费账号弹出框
      AccountForm: {
        accountType: null, // 账户类型
        challengeProject: null, // 挑战项目
        accountMoney: null, // 交易资金
        accountCharges: null, // 账户费用
        //cryptocurrencyName: null, // stripe名称
        //paymentConnection: null // stripe地址
      }, //收费账号form
      userInfo: {},
      dialogVisible: false,
      tableData: {},
      // AccountType: [],
      total: 50,
      formPay: {
        page: 1,
        pageSize: 10,
        accountType: null,
        challengeProject: null
      },
      rules: {
        accountType: [
          { required: true, message: '请选择账户类型', trigger: 'blur' }
        ],
        challengeProject: [
          { required: true, message: '请选择挑战项目', trigger: 'blur' }
        ],
        accountMoney: [
          { required: true, message: '请输入交易资金', trigger: 'blur' },
        ],
        accountCharges: [
          { required: true, message: '请输入账户费用', trigger: 'blur' },
        ],
        cryptocurrencyName: [
          { required: true, message: '请输入stripe支付名称', trigger: 'blur' },
        ],
        paymentConnection: [
          { required: true, message: '请输入stripe支付链接', trigger: 'blur' },
        ]
      },
    }
  },
  computed: {
    AccountType() {
      return AccountType
    },
    // 挑战项目
    challenges() {
      return challenges
    }
  },
  mounted() {
    this.getuseACCouyt()
    this.getPayingListArr()
  },

  methods: {
    async getuseACCouyt() {
      const data = await getAccountType()
      this.AccountType = data
    },
    // 列表
    async getPayingListArr() {
      const data = await getPayingList(this.formPay)
      this.tableData = data.records
      this.total = data.total
    },
    // 查询
    chaBTn() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formPay.page = 1
        this.getPayingListArr()
      }, 100)
    },
    // 编辑
    editBtn(row) {
      this.userInfo = row
      this.dialogVisible = true
    },
    handleSizeChange(val) {
      this.formPay.pageSize = val
      // 处理分页大小改变的逻辑
      this.getPayingListArr()
    },
    handleCurrentChange(val) {
      this.formPay.page = val
      // 处理当前页码改变的逻辑s
      this.getPayingListArr()
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 打开新增账号弹出框
     * @date
     */
    AccountDialog() {
      this.dialogAccount = true
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description  确定新增收费账号
     * @date
     */
    async BtnAccount() {
      await this.$refs.AccountForm.validate()
      const res = await addAccountCharges(this.AccountForm)
      this.$message({
        message: res.paymentResult,
        type: 'success'
      })
      this.dialogAccount = false
      await this.getPayingListArr()
      this.$refs.AccountForm.resetFields()
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description  删除收费账号
     * @date
     */
    deleteAccount(id) {
      this.$confirm('此操作将永久删除该收费账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteAccount(id)
        this.$message({
          type: 'success',
          message: res.paymentResult
        })
        await this.getPayingListArr()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改数据后刷新表格列表
    handleUpdateData(records, total) {
      this.tableData = records;
      this.total = total;
    }
  }
}
</script>

<style lang="scss">
/* 隐藏 el-input-number 组件的加减按钮 */
.el-input-number .el-input-number__decrease,
.el-input-number .el-input-number__increase {
  display: none !important;
}
</style>
